//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Popup Menu

   Default Mendix Popup Menus
========================================================================== */
.popupmenu {
    position: relative;
    display: inline-flex;
}

.popupmenu-trigger {
    cursor: pointer;
}

.popupmenu-menu {
    position: absolute;
    z-index: 999;
    display: none;
    flex-direction: column;
    width: max-content;
    border-radius: 8px;
    background-color: $bg-color;
    box-shadow: 0 2px 20px 1px rgba(5, 15, 129, 0.05), 0 2px 16px 0 rgba(33, 43, 54, 0.08);

    &.popupmenu-position-left {
        top: 0;
        left: 0;
        transform: translateX(-100%);
    }

    &.popupmenu-position-right {
        top: 0;
        right: 0;
        transform: translateX(100%);
    }

    &.popupmenu-position-top {
        top: 0;
        transform: translateY(-100%);
    }

    &.popupmenu-position-bottom {
        bottom: 0;
        transform: translateY(100%);
    }

    .popupmenu-basic-item:first-child,
    .popupmenu-custom-item:first-child {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .popupmenu-basic-item:last-child,
    .popupmenu-custom-item:last-child {
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
    }
}

.popupmenu-basic-divider {
    width: 100%;
    height: 1px;
    background-color: $brand-default;
}

.popupmenu-basic-item {
    padding: 12px 16px;
    color: $font-color-default;
    font-size: 14px;

    &:hover,
    &:focus,
    &:active {
        cursor: pointer;
        border-color: $bg-color-secondary;
        background-color: $bg-color-secondary;
    }

    &-inverse {
        color: $brand-inverse;
    }

    &-primary {
        color: $brand-primary;
    }

    &-info {
        color: $brand-info;
    }

    &-success {
        color: $brand-success;
    }

    &-warning {
        color: $brand-warning;
    }

    &-danger {
        color: $brand-danger;
    }
}

.popupmenu-custom-item {
    &:hover,
    &:focus,
    &:active {
        cursor: pointer;
        border-color: $bg-color-secondary;
        background-color: $bg-color-secondary;
    }
}
